<template>
  <div class="fundBudgetPage">
    <div class="search-wrap d-flex a-center flex-wrap">
        <div class="search-item d-flex a-center m-b10" v-if="departmentId=='4342714503178637155'">
            <label>部门</label>
            <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门">
                <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
            </el-select>
        </div>
        <div class="search-item d-flex a-center m-l20  m-b10">
            <label>项目集</label>
            <el-input v-model="form.projectSetName" class="m-l5" placeholder="请输入项目集"></el-input>
        </div>
        <div class="search-item d-flex a-center m-l20  m-b10">
            <label>年度</label>
            <el-input
                v-model="form.year"
                class="m-l5"
                placeholder="请输入年度"
                @input="form.year = limitInputNum(form.year,4,0,false)"
            ></el-input>
        </div>
        <div class="search-item d-flex a-center m-l20  m-b10">
            <label>月度</label>
            <el-input
                v-model="form.monthly"
                class="m-l5"
                placeholder="请输入月度"
                @input="form.monthly = limitInputNum(form.monthly,2,0,false)"
            ></el-input>
        </div>
        <div class="search-buttons m-l10 m-b10">
            <el-button
                    color="#fc702b"
                    style="color:#fff;"
                    @click.prevent="onQuery"
            >查询</el-button>
            <el-button
                    color="#f0f0f0"
                    style="color: #000000"
                    @click.prevent="onReset"
            >重置</el-button>
            <el-divider direction="vertical" />
            <el-button
                    @click="toPage"
                    class="button_edit m-r10"
            >
                查看流入流出情况
            </el-button>
            <el-button
                    class="button_edit"
                    @click="onExport"
            >
                <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                一键导出
            </el-button>
        </div>
    </div>
    <public-table
            class="m-t20"
            index
            :page="page"
            :tableData="tableData"
            :tableOption.sync="tableOption"
            @page-change="onPageChange"
            @handleSelectionChange="handleSelectionChange"
    >
        <template #departmentName="scope">
            <span
                v-if="scope.row.departmentName"
                style="color: #fc7037;cursor: pointer;"
                @click="toDepartmentPage"
            >{{scope.row.departmentName}}</span>
            <span v-else>-</span>
        </template>
    </public-table>
  </div>
</template>

<script setup>
import {ElDivider, ElMessage} from "element-plus";
import PublicTable from "@/components/PublicTable";
import {onMounted, reactive, ref} from "vue";
import {exportApi, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, limitInputNum, localGet, resetForm} from "@/common/utils/GlobalUtils";
import router from "@/router";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const departmentId = localGet('DepartmentId');

const tableData = ref([]);

const tableOption = ref([
    { label: "部门", prop: "departmentName",slot:true, minWidth: 50 },
    { label: "项目集 ", prop: "mainProjectName", minWidth: 80 },
    { label: "年度 ", prop: "year", minWidth: 50 },
    { label: "季度 ", prop: "quarter", minWidth: 50 },
    { label: "月度 ", prop: "monthly", minWidth: 50 },
    { label: "资金预算金额", prop: "budgetAmount", minWidth: 120 },
]);

const form = reactive({
    departmentId:'',
    projectName:'',
    year:'',
    monthly:'',
    projectSetName:''
});

const departmentList = ref([]);
const getDepartmentVo = () => {
  fundManagementApi.getDepartmentVo().then(res=>{
      departmentList.value = res.data;
  });
}

const getFundBudgetPlanVo = (param) => {
  fundManagementApi.getFundBudgetPlanVo(param).then(res=>{
      tableData.value = res.data.content;
      page.total = res.data.totalSize;
  });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetPlanVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetPlanVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetPlanVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.fundBudgetPlanVoLeadingOut(form).then(res=>{
        if (res) {
            exportExcelFile(res,'资金预算表');
        }
    });
}

/**
 * 跳转资金预算总台账
 */
const toPage = () => {
    router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/budgetLedger1`});
}

/**
 * 部门资金预算台账
 */
const toDepartmentPage = () => {
    router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/budgetLedger2`});
}

onMounted(()=>{
    getDepartmentVo();
    getFundBudgetPlanVo({
        pageNum:1,
        pageSize:10
    });
});
</script>

<style lang="scss" scoped>
.fundBudgetPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
